<template>
	<view style="background-color: #F1F1F1;">
		<u-sticky style="background-color: #FFFFFF;">
			<u-dropdown @open="open1" @close="close1" :border-bottom='true' ref="uDropdown"
				style="background-color: #FFFFFF;">
				<u-dropdown-item title="筛选" style="background-color: #FFFFFF;">
					<view class="slot-content">
						<view class="item-box">
							<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)"
								v-for="(item, index) in ddList" :key="index">
								{{item.label}}
							</view>
						</view>
						<view style="padding: 20rpx;">
							<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
						</view>
						<u-button type="primary" @click="closeDropdown">确定</u-button>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="ddValue1" :title="ddValue1" :options="ddOptions1" @change="ddChange()">
				</u-dropdown-item>
				<u-dropdown-item v-model="ddValue2" :title="ddValue2" :options="ddOptions2" @change="ddChange()">
				</u-dropdown-item>
				<u-dropdown-item v-model="ddValue3" :title="ddValue3" :options="ddOptions3" @change="ddChange()">
				</u-dropdown-item>
			</u-dropdown>
		</u-sticky>
		<view class="hall_body">
			<view v-if="okamiList.length>0">
				<hallOkami v-for="(item,i) in okamiList" :key="i" :avatar_src="item.avatar"
					:descriptor="item.descriptor" :game_name="item.game" :game_rank="item.rank"
					:play_name="item.username" :user_id="item.id" :price="item.price" :play_characteristics="item.trait"
					:unit="item.unit" :sex_age="getSexAge(item)" :tag_type="getTypeBySex(item)"
					:isService="item.service" />
			</view>
			<view v-else class="no_body">
				<u-empty text="\n所谓伊人，在水一方\n\n还没有人想要一起玩" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import hallOkami from "@/components/hall_okami/hall_okami.vue"
	export default {
		name: "hall",
		components: {
			hallOkami
		},
		data() {
			return {
				list: [{
						name: '需求'
					},
					{
						name: '服务'
					},
					{
						name: '不限'
					}
				],
				current: 2,
				isOpen: false,
				scrollTop: 0,
				ddValue1: '价格', // 选中的值
				ddValue2: '交流', // 选中的值
				ddValue3: '性别', // 选中的值
				ddOptions1: [{
						label: '不限', // 显示的文字
						value: '价格', // 选中的值
					}, {
						label: '免费', // 显示的文字
						value: '免费', // 选中的值
					},
					{
						label: '有偿', // 显示的文字
						value: '有偿', // 选中的值
					}
				],
				ddOptions2: [{
						label: '不限', // 显示的文字
						value: '交流', // 选中的值
					}, {
						label: '开麦', // 显示的文字
						value: '开麦', // 选中的值
					},
					{
						label: '闭麦', // 显示的文字
						value: '闭麦', // 选中的值
					},
				],
				ddOptions3: [{
						label: '不限', // 显示的文字
						value: '性别', // 选中的值
					},
					{
						label: '男', // 显示的文字
						value: '男', // 选中的值
					},
					{
						label: '女', // 显示的文字
						value: '女', // 选中的值
					},
				],
				ddList: [{
						label: '第五人格',
						active: false,
					},
					{
						label: '王者荣耀',
						active: false,
					},
					{
						label: '和平精英',
						active: false,
					},
					{
						label: '声音好听',
						active: false,
						type: 'man'
					},
					{
						label: '大神带飞',
						active: false,
					},
					{
						label: '急速接单',
						active: false,
					}
				],
				//okamiList:[],
				okamiList: [{
					id: 1,
					username: '亲爱的自己',
					sex: '男',
					age: 20,
					avatar: '/static/icon/ui/user/avatar/1.png',
					game: '第五人格',
					rank: '一阶',
					trait: '声音好听',
					price: '1.20',
					unit: '币/局',
					descriptor: '带你飞',
					service: false
				}, {
					id: 2,
					username: '乐乐',
					sex: '女',
					age: 21,
					avatar: '/static/icon/ui/user/avatar/2.png',
					game: '王者荣耀',
					rank: '荣耀黄金',
					trait: '温柔可人',
					price: '1.50',
					unit: '币/局',
					descriptor: '后来的我们，一个不愿联系，一个不愿打扰',
					service: true,
				}, {
					id: 3,
					username: '手心的蔷薇',
					sex: '女',
					age: 22,
					avatar: '/static/icon/ui/user/avatar/3.png',
					game: '第五人格',
					rank: '一阶',
					trait: '温柔可人',
					price: '1.20',
					unit: '币/局',
					descriptor: '希望风吹到你的脸，就是我吻你的，而我又在想你了。',
					service: false
				}, {
					id: 4,
					username: '在线卑微',
					sex: '男',
					age: 20,
					avatar: '/static/icon/ui/user/avatar/4.png',
					game: '王者荣耀',
					rank: '王者',
					trait: '大神带飞',
					price: '1.00',
					unit: '币/局',
					descriptor: '谁知道洒脱的人，用了多少时间才哭干了眼泪。',
					service: false
				}, {
					id: 5,
					username: '琪琪',
					sex: '男',
					age: 19,
					avatar: '/static/icon/ui/user/avatar/5.png',
					game: '第五人格',
					rank: '二阶',
					trait: '找盆友',
					price: '1.10',
					unit: '币/局',
					descriptor: '我懂的适可而止和知足，而你什么时候给过我爱和满足。',
					service: true
				}, {
					id: 6,
					username: '玉儿',
					sex: '男',
					age: 18,
					avatar: '/static/icon/ui/user/avatar/6.png',
					game: '王者荣耀',
					rank: '荣耀黄金',
					trait: '组队CP',
					price: '1.90',
					unit: '币/局',
					descriptor: '南墙我撞了，除了自欺欺人什么都没有。',
					service: true
				}, {
					id: 7,
					username: '不想取昵称',
					sex: '女',
					age: 20,
					avatar: '/static/icon/ui/user/avatar/7.png',
					game: '第五人格',
					rank: '三阶',
					trait: '跳绳冠军',
					price: '2.20',
					unit: '币/局',
					descriptor: '小女子不才，明知公子已有心上人，却还是止不住的想要靠近你。',
					service: false
				}, {
					id: 8,
					username: '大学一年级',
					sex: '女',
					age: 21,
					avatar: '/static/icon/ui/user/avatar/8.png',
					game: '王者荣耀',
					rank: '荣耀黄金',
					trait: '声音好听',
					price: '10.20',
					unit: '币/局',
					descriptor: '草在等他的雨，风在追他的云， 我在想我的你。',
					service: false
				}, {
					id: 9,
					username: '呼呼呼',
					sex: '女',
					age: 22,
					avatar: '/static/icon/ui/user/avatar/9.png',
					game: '王者荣耀',
					rank: '荣耀黄金',
					trait: '声音好听',
					price: '12.20',
					unit: '币/局',
					descriptor: '风尘不过一女子， 我也不过一个你。',
					service: false
				}, {
					id: 10,
					username: '糖糖鸭',
					sex: '男',
					age: 21,
					avatar: '/static/icon/ui/user/avatar/10.png',
					game: '第五人格',
					rank: '六阶',
					trait: '声音好听',
					price: '12.10',
					unit: '币/局',
					descriptor: '等到看到这银色满际，等到分不清季节更替，才敢说我喜欢你。',
					service: false
				}, {
					id: 11,
					username: '清风',
					sex: '男',
					age: 22,
					avatar: '/static/icon/ui/user/avatar/11.png',
					game: '和平精英',
					rank: '黄金',
					trait: '声音好听',
					price: '1.22',
					unit: '币/半小时',
					descriptor: '该来的总会来，不该来的，早就来过了。',
					service: false
				}, {
					id: 12,
					username: '我喜欢可爱的狗狗',
					sex: '女',
					age: 21,
					avatar: '/static/icon/ui/user/avatar/12.png',
					game: '第五人格',
					rank: '荣耀黄金',
					trait: '声音好听',
					price: '1.21',
					unit: '币/局',
					descriptor: '从来都没欠过谁 但总是这么狼狈。',
					service: false
				}]
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			loadData: function() {
				var stype;
				if (this.current == 0) {
					stype = '需求';
				} else
				if (this.current == 1) {
					stype = '服务';
				} else
				if (this.current == 2) {
					stype = '不限';
				}
				console.debug('价格 ' + this.ddValue1);
				console.debug('开麦 ' + this.ddValue2);
				console.debug('性别 ' + this.ddValue3);
				console.debug('类别 ' + stype);
				console.debug('第五人格 ' + this.ddList[0].active);
				console.debug('王者荣耀 ' + this.ddList[1].active);
				console.debug('和平精英 ' + this.ddList[2].active);
				console.debug('声音好听 ' + this.ddList[3].active);
				console.debug('大神带飞 ' + this.ddList[4].active);
				console.debug('急速接单 ' + this.ddList[5].active);
				let query;
				query = {
					price:this.ddValue1,
					voice:this.ddValue2,
					sex:this.ddValue3,
					type:stype,
					dwrg:this.ddList[0].active,
					wzry:this.ddList[1].active,
					hpjy:this.ddList[2].active,
					syht:this.ddList[3].active,
					dsdf:this.ddList[4].active,
					jsjd:this.ddList[5].active
				}
				
				uni.request({
					url: this.httpRoot + 'index',
					method: 'GET',
					data: {
						query:query
					},
					success: res => {
						console.debug(res);
						console.debug(res.data);
						var code = 0;
						var data = {};
						var message = '';
						if ('code' in res.data) {
							code = res.data.code;
						}
						if ('message' in res.data) {
							message = res.data.message;
						}
						if ('data' in res.data) {
							data = res.data.data;
							// data = res.data.data.parseJSON(); //由JSON字符串转换为JSON对象
							// data = JSON.parse(res.data.data);
							console.debug('数据：');
							console.debug(data);
							if ('okami_list' in data) {
								this.okamiList = data.okami_list;
								console.debug(data.okami_list)
							}
							
							uni.showToast({
								title:'已刷新',
								duration:800
							});
							
						} else {
							uni.showToast({
								title: '服务器错误',
								icon: 'none'
							});
						}
						if (message != '') {
							uni.showToast({
								title: message,
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showModal({
							title: '请求数据失败'
						});
					},
					complete: () => {

					}
				});
			},
			open1() {
				this.isOpen = true;
				console.debug("打开");
			},
			close1() {
				this.isOpen = false;
				console.debug("关闭");
			},
			ddChange() { // 筛选条件改变时
				console.debug(this.ddValue1 + "，" + this.ddValue2 + "，" + this.ddValue3);
				this.loadData();
			},
			tagClick(index) {
				this.ddList[index].active = !this.ddList[index].active;
			},
			closeDropdown() { // 关闭筛选
				this.$refs.uDropdown.close();
				this.loadData();
			},
			getSexAge(item) {
				var str = "";
				if (item.sex == "男") {
					str += "♂";
				} else if (item.sex == "女") {
					str += "♀";
				}
				str += item.age.toString();
				return str;
			},
			getTypeBySex(item) {
				if (item.sex == "男") {
					return "primary";
				} else if (item.sex == "女") {
					return "error";
				}
				return "error";
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed {
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		height: auto;

		>view.active {
			height: 100vh;
		}

		/deep/ .u-dropdown {
			background-color: #fff;
		}
	}

	.hall_body {
		margin-top: 20rpx;
	}

	.no_body {
		margin-top: 50rpx;
	}

	.slot-content {
		// 下拉框样式
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			padding-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}

	page {
		height: 100%;
		background-color: rgb(244, 244, 244);
	}
</style>
